<script setup lang="ts" name="entries">
import { CategoryItem } from "@/types/home"
defineProps<{ source: CategoryItem[] }>();
// 响应数据
let cursorLeft = $ref("0%");
// 滚动事件
const scrolled = (ev: WechatMiniprogram.ScrollViewScroll) => {
  cursorLeft = (ev.detail.scrollLeft / ev.detail.scrollWidth) * 100 + "%";
};
</script>

<template>
  <view class="entries">
    <scroll-view class="scroll-view" scroll-x enhanced :show-scrollbar="false" @scroll="scrolled">
      <view class="navs">
        <view class="navs-item">
          <navigator v-for="item in source" :key="item.id" class="navigator" hover-class="none" url="/pages/goods/list/index">
            <image class="icon" :src="item.icon"> </image>
            <text class="text">{{ item.name }}</text>
          </navigator>
        </view>
        <!-- <view class="navs-item">
          <navigator v-for="item in source" :key="item.id" class="navigator" hover-class="none" url="/pages/goods/list/index">
            <image class="icon" :src="item.icon"> </image>
            <text class="text">{{ item.name }}</text>
          </navigator>
        </view> -->
      </view>
    </scroll-view>
    <!-- 滚动条 -->
    <!-- <view class="scroll-bar">
      <view class="cursor" :style="{ left: cursorLeft }"></view>
    </view> -->
  </view>
</template>

<style>
.entries {
  margin: 20rpx 0 0;
  padding: 10rpx 0;
}

.entries .navs {
  display: flex;
  /* width: 200%; */
  width: 100%;
}

.entries .navs-item {
  display: flex;
  flex-wrap: wrap;
  /* width: 50%; */
  text-align: center;
  min-height: 328rpx;
  box-sizing: border-box;
}

.entries .navigator {
  width: 150rpx;
  margin-bottom: 28rpx;
  float: left;
}

.entries .navigator .icon {
  width: 100rpx;
  height: 100rpx;
}

.entries .navigator .text {
  display: block;
  font-size: 26rpx;
  color: #666;
}

.entries .scroll-bar {
  width: 100rpx;
  height: 6rpx;
  margin: auto;
  border-radius: 6rpx;
  background-color: #e2e2e2;
  position: relative;
}

.entries .scroll-bar .cursor {
  width: 50%;
  height: 100%;
  background-color: #28bb9c;
  border-radius: 6rpx;

  position: absolute;
  left: 0;
}
</style>
